<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { listOperate } from '#/api/gis/operate';
import { listOperateByEs } from '#/api/gis/operate';



interface RowType {

}



const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
  {
      component: 'Input',
      componentProps: {
        placeholder: '请输入查询条件',
      },
      fieldName: 'search',
      label: '查询：',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'title', title: '操作模块' },
    { field: 'businessTypeFormatted', title: '操作类型' },
    { field: 'operName', title: '操作人' },
    { field: 'operIp', title: '操作IP' },
    { field: 'statusFormatted', title: '操作状态' },
    { field: 'operTime', title: '操作时间' },
  ],
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        console.log("查询参数:", formValues);
        if (formValues.search && formValues.search.trim() !== '') {
          // 调用 listOperateByEs 方法
          console.log("调用 listOperateByEs 方法");
          console.log("搜索条件:", formValues.search);
          return await listOperateByEs({
            pageNum: page.currentPage,
            pageSize: page.pageSize,
            search: formValues.search,
          });
        } else {
          // 调用 listOperate 方法
          console.log("调用 listOperateBy 方法");
          return await listOperate({
            pageNum: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          });
        }
      },
    },
  },
};

const [Grid] = useVbenVxeGrid({
  gridOptions,
  formOptions,
});


</script>

<template>
  <div>
    <div class="spacing">
  
    </div>

    <div class="vp-raw w-full">
      <Grid>
      </Grid>
    </div>
  </div>
</template>

<style scoped>
.spacing {
  margin: 10px;
}

.custom-modal-content {
  height: 30px
}
</style>
